<template>
  <div class="class-management">
    <div class="container">
      <div class="btnlist">
        <div class="leftbtn">
           <a-button type="primary" style="margin-right: 30px;" @click="addClass">新增</a-button>
          <a-button :loading="loading" @click="batchDelete">批量删除</a-button>
        </div>
        <a-input-search
          placeholder="输入关键词搜索"
          enter-button="搜索"
          style="width: 350px"
          @search="onSearch"
        />
        <a-button type="primary" @click="exportData">导出</a-button>
      </div>
      <div class="table-box">
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="tableData"
          :rowKey="(row, index) => {return row.banji_id;}">
          <template slot="operation" slot-scope="text, record">
            <div class="oper-btn">
              <a-button @click="() => editClass(record)">编辑</a-button>
              <a-button style="margin-left: 10px" type="danger" @click="() => deleteClass(record)">删除</a-button>
              <a-button style="margin-left: 10px" type="primary" @click="classListDia(record)">班级名单</a-button>
            </div>
          </template>
        </a-table>
      </div>
    </div>
    <a-modal v-model="classVisible" title="班级名单" :footer="null" centered>
      <div class="modal-box">
        <div class="modal-top">
          <a-button style="margin-right: 90px;" type="primary" @click="openClassList">名单删减</a-button>
          <a-input-search
            placeholder="输入关键词搜索"
            enter-button="搜索"
            style="width: 350px"
            @search="onSearch"
          />
        </div>
        <div class="table-content">
          <a-table :columns="classColumns" :data-source="classData" :rowKey="(row, index) => {return index;}">
            <a slot="name" slot-scope="text">{{ text }}</a>
          </a-table>
        </div>
      </div>
    </a-modal>
    <a-modal v-if="editVisible" v-model="editVisible" :title="this.classId ? '修改班级' : '新增班级'" :footer="null" centered>
      <div class="modal-box">
        <a-form-model :model="formData">
          <a-form-model-item label="* 所属学校">
            <a-select v-model="formData.school_id" style="width: 420px" placeholder="请选择所属学校" @change="handleSchoolChange">
              <a-select-option v-for="item in schoolData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="* 学期">
            <a-select v-model="formData.term_id" style="width: 420px" placeholder="请选择学期" @change="handleTermChange">
              <a-select-option v-for="item in termData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="* 课程">
            <a-select v-model="formData.course_id" style="width: 420px" placeholder="请选择课程">
              <a-select-option v-for="item in courseData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="* 班级名称">
            <a-input v-model="formData.title" style="width: 420px"  placeholder="班级名称" />
          </a-form-model-item>
        </a-form-model>
      </div>
      <template>
        <a-button style="margin-right: 15px;" key="submit" type="primary" @click="editClassFun">提交</a-button>
        <a-button key="back" @click="editVisible = false">取消</a-button>
      </template>
    </a-modal>

    <ClassList :addDialogVisible="addDialogVisible" :schoolId="schoolId" :classId="classId" @update:addDialogVisible="addDialogVisible = $event" @refresh="loadClassList"></ClassList>
  </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
  },
  {
    title: '学校',
    dataIndex: 'school_name',
  },
  {
    title: '班级名称',
    dataIndex: 'banji_name',
  },
  {
    title: '老师',
    dataIndex: 'teacher_name',
  },
  {
    title: '班级人数',
    dataIndex: 'student_num',
  },
  {
    title: '创建时间',
    dataIndex: 'create_time_text',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

const classColumns = [
  {
    title: '序号',
    dataIndex: 'index',
  },
  {
    title: '学校',
    dataIndex: 'school_name',
  },
  {
    title: '学籍号',
    dataIndex: 'no',
  },
  {
    title: '学生姓名',
    dataIndex: 'name',
  },
  {
    title: '创建时间',
    dataIndex: 'create_time_text',
  },
];

import ClassList from './classList.vue'
export default {
  components: { ClassList },
  data() {
    return {
      columns,
      tableData: [],
      classColumns,
      classData: [],
      selectedRowKeys: [],
      loading: false,
      classVisible: false,
      editVisible: false,
      schoolName: '',
      schoolId: '',
      className: '',
      classId: '',
      addDialogVisible: false,
      schoolData: [],
      termData: [],
      courseData: [],
      formData: {
        title: '',
        school_id: '',
        term_id: '',
        course_id: '',
      }
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  mounted() {
    this.getBanjiList();
  },
  methods: {
    async getBanjiList() {
      const res = await this.$request.get(`api/school/banji?school_name=${this.schoolName}&banji_name=${this.className}`);
      if (res.code === 1) {
        res.data.forEach((item, index) => {
          item.index = index + 1;
        });
        this.tableData = res.data || [];
      }
    },
    async getSchoolList() {
      this.formData.school_id = ''
      this.formData.term_id = ''
      this.formData.course_id = ''
      const res = await this.$request.get('api/school/index');
      if (res.code === 1) {
        this.schoolData = res.data || [];
        if (this.schoolData.length) {
          this.formData.school_id = this.schoolData[0].id
          await this.getTermList()
        }
      }
    },
    handleSchoolChange(value) {
      this.getTermList()
      this.getCourseList()
    },
    async getTermList() {
      this.formData.term_id = ''
      this.formData.course_id = ''
      const res = await this.$request.get('api/school/term_list?school_id=' + this.formData.school_id);
      if (res.code === 1) {
        this.termData = res.data || [];
        if (this.termData.length) {
          this.formData.term_id = this.termData[0].id
          await this.getCourseList()
        }
      }
    },
    handleTermChange(value) {
      this.getCourseList()
    },
    async getCourseList() {
      this.formData.course_id = ''
      const res = await this.$request.get('api/course/course_list?school_id=' + this.formData.school_id + '&term_id=' + this.formData.term_id);
      if (res.code === 1) {
        this.courseData = res.data || [];
        if (this.courseData.length) {
          this.formData.course_id = this.courseData[0].id
        }
      }
    },
    addClass() {
      this.formData = {
        title: '',
        term_id: '',
        course_id: '',
      }
      this.classId = 0;
      this.editVisible = true
      if (!this.schoolData.length) {
        this.getSchoolList()
      } else {
        this.formData.school_id = this.schoolData[0].id
      }
      if (this.termData.length) {
        this.formData.term_id = this.termData[0].id
      }
      if (this.courseData.length) {
        this.formData.course_id = this.courseData[0].id
      }
    },
    openClassList() {
      this.addDialogVisible = true;
    },
    batchDelete() {
      this.loading = true;
      this.$request.post('api/shcool/del_banji', { ids: this.selectedRowKeys.join(',') }).then(res => {
        if (res.code == 1) {
          this.loading = false;
          this.selectedRowKeys = [];
          this.getBanjiList();
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    editClass(record) {
      this.editVisible = true;
      this.classId = record.banji_id;
      this.className = record.banji_name;
    },
    editClassFun() {
      if (!this.classId) {
        return this.addClassFun()
      }
      this.$request.post('api/school/edit_banji', { id: this.classId, name: this.className }).then(res => {
        if (res.code == 1) {
          this.editVisible = false;
          this.getBanjiList();
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    addClassFun() {
      this.$request.post('api/school/add_banji', this.formData).then(res => {
        if (res.code == 1) {
          this.editVisible = false;
          this.getBanjiList();
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      console.log(selectedRowKeys, 'selectedRowKeys');
    },
    onSearch(value) {
      this.getBanjiList();
      console.log(value);
    },
    classListDia(record) {
      console.log(record)
      this.classVisible = true;
      this.classId = record.banji_id;
      this.schoolId = record.school_id;
      this.schoolName = record.school_name;
      this.classData = []
      this.loadClassList()
    },
    async loadClassList() {
      const res = await this.$request.get(`api/school/banji_student_list?id=${this.classId}&school_name=${this.schoolName}&no=&student_name=`);
      if (res.code === 1) {
        res.data.data.forEach((item, index) => {
          item.index = index + 1;
        });
        this.classData = res.data.data || [];
      }
    },
    deleteClass(record) {
      this.$request.post('api/shcool/del_banji', { ids: record.banji_id }).then(res => {
        if (res.code == 1) {
          this.$message.success('删除成功！')
          this.getStudentList();
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    exportData() {
      this.$request.post(`api/school/banji_export?school_name=${this.schoolName}&banji_name=${this.className}`).then(res => {
        if (res.code == 1) {
          const link = document.createElement('a');
          link.href = this.imageUrl + res.data.filePath;
          link.download = res.data.fileName;
          link.click();
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
.class-management{
  width: 100%;
  .btnlist{
    display: flex;
    justify-content: space-between;
    padding-bottom: 28px;
  }
}
.modal-top{
  margin-bottom: 20px;
}
/deep/ .ant-modal-content{
  width: 856px;
  // height: 234px;
  background: linear-gradient( 180deg, #DFF1FF 0%, #FFFFFF 100%);
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
  border-radius: 8px;
}
/deep/ .ant-modal-header{
  background: none;
  border-bottom: none;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
}
/deep/ .ant-form-item{
  display: flex;
  justify-content: center;
}
</style>